<template>
  <div class="app-container">
    <div class="top-box">
      <el-card>
        <div style="text-align: right">
          <el-tooltip class="item" effect="dark" content="今日访问IP" placement="top">
            <img style="width: 20px; height: 20px" src="../../../../assets/icon/dashInfo.png" alt="" />
          </el-tooltip>
        </div>
        <div class="container-box">
          <div class="left-icon">
            <img src="../../../../assets/icon/Dashboardicon1.png" alt="" />
          </div>
          <div class="right-text">
            <div>今日访问量</div>
            <div>{{ cardObj.todayVisits }}</div>
          </div>
        </div>
        <div class="container-box-footer">
          日环比
          <img v-if="cardObj.visitsDayRate > 0" src="../../../../assets/icon/Dashboardicon5.png" alt="" />
          <img v-else src="../../../../assets/icon/Dashboardicon7.png" alt="" />
          <span :style="{
            color: cardObj.visitsDayRate > 0 ? '#FF3838' : '#2DC200',
          }">{{ cardObj.visitsDayRate }}%</span>
        </div>
      </el-card>
      <el-card>
        <div style="text-align: right">
          <el-tooltip class="item" effect="dark" content="今日新增账号，以手机号作为唯一标识" placement="top">
            <img style="width: 20px; height: 20px" src="../../../../assets/icon/dashInfo.png" alt="" />
          </el-tooltip>
        </div>
        <div class="container-box">
          <div class="left-icon">
            <img src="../../../../assets/icon/Dashboardicon2.png" alt="" />
          </div>
          <div class="right-text">
            <div>今日新增量</div>
            <div>{{ cardObj.todayCount }}</div>
          </div>
        </div>
        <div class="container-box-footer">
          日环比
          <img v-if="cardObj.countDayRate > 0" src="../../../../assets/icon/Dashboardicon5.png" alt="" />
          <img v-else src="../../../../assets/icon/Dashboardicon7.png" alt="" />
          <span :style="{ color: cardObj.countDayRate > 0 ? '#FF3838' : '#2DC200' }">{{ cardObj.countDayRate }}%</span>
        </div>
      </el-card>
      <el-card>
        <div style="text-align: right">
          <el-tooltip class="item" effect="dark" content="每日累计访问量" placement="top">
            <img style="width: 20px; height: 20px" src="../../../../assets/icon/dashInfo.png" alt="" />
          </el-tooltip>
        </div>
        <div class="container-box">
          <div class="left-icon">
            <img src="../../../../assets/icon/Dashboardicon3.png" alt="" />
          </div>
          <div class="right-text">
            <div>历史访问用户</div>
            <div>{{ cardObj.visits }}</div>
          </div>
        </div>
        <!-- <div class="container-box-footer">11111</div> -->
      </el-card>
      <el-card>
        <div style="text-align: right">
          <el-tooltip class="item" effect="dark" content="总用户数量，以手机号为唯一标识" placement="top">
            <img style="width: 20px; height: 20px" src="../../../../assets/icon/dashInfo.png" alt="" />
          </el-tooltip>
        </div>
        <div class="container-box">
          <div class="left-icon">
            <img src="../../../../assets/icon/Dashboardicon4.png" alt="" />
          </div>
          <div class="right-text">
            <div>全部用户</div>
            <div>{{ cardObj.total }}</div>
          </div>
        </div>
        <!-- <div class="container-box-footer">11111</div> -->
      </el-card>
    </div>

    <div style="margin-top: 20px">
      <el-card>
        <div style="font-weight: 500; font-size: 18px; color: #222222">
          用户行为统计分析
        </div>
        <el-form :model="searchForm" inline size="small" style="margin-top: 20px">
          <el-form-item>
            <el-radio-group v-model="searchForm.dateLimit" @change="TimeChange($event)">
              <el-radio-button label="today">今天</el-radio-button>
              <!--<el-radio-button label="yesterday">昨天</el-radio-button>-->
              <el-radio-button label="lately7">近7天</el-radio-button>
              <el-radio-button label="lately30">近30天</el-radio-button>
              <!-- <el-radio-button label="month">近一月</el-radio-button> -->
              <el-radio-button label="year">近一年</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item>




            <el-form-item label="" prop="startTime">
              <el-date-picker style="width: 200px" v-model="beginTime" align="right" type="date"
                placeholder="选择开始日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd"
                format="yyyy 年 MM 月 dd 日">
              </el-date-picker>
            </el-form-item>
            <el-form-item>-</el-form-item>
            <el-form-item>
              <el-date-picker v-model="endTime" align="right" type="date" placeholder="选择结束日期"
                :picker-options="pickerOptions" value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日">
              </el-date-picker>
            </el-form-item>




            <!-- <el-date-picker v-model="searchTime" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeTime" /> -->
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" size="small" @click="onReset">重置</el-button>
            <el-button type="primary" icon="el-icon-search" size="small" @click="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card>
        <div style="display: flex; justify-content: space-between">
          <div style="
              width: 49%;
              box-shadow: 0px 2px 4px 0px rgba(0, 57, 115, 0.16);
              padding: 10px;
            ">
            <el-radio-group v-model="lineType" @change="lineTypeChange" size="mini">
              <el-radio-button label="0">新注册</el-radio-button>
              <el-radio-button label="1">访问量</el-radio-button>
            </el-radio-group>
            <div style="height: 49vh; margin-top: 20px" id="lineEcharts"></div>
          </div>
          <div style="
              width: 49%;
              box-shadow: 0px 2px 4px 0px rgba(0, 57, 115, 0.16);
              padding: 10px;
            ">
            <el-radio-group v-model="pieType" @change="pieTypeChange" size="mini">
              <el-radio-button label="0">平台占比</el-radio-button>
              <el-radio-button label="1">渠道分类占比</el-radio-button>
            </el-radio-group>

            <div v-if="pieType == 0" style="
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 20px;
                height: 49vh;
              ">
              <!--border: 1px dotted #ccc;-->
              <div style="
                  width: 450px;
                  height: 450px;
                  margin-right: 20px;
                " id="pieEcharts"></div>

              <div class="des">
                <div class="desItem" v-for="(item, index) in pieData1" :key="index">
                  <div class="label" :style="{ backgroundColor: color[index] }"></div>
                  <div class="value">
                    <div class="rate">
                      <span style="width: 100px; display: inline-block">{{
                        nameFun(item.text)
                      }}</span>
                      <span style="width: 60px; display: inline-block" class="num">{{ item.ratio }}</span>
                    </div>
                    <span>{{ item.num }}</span>
                  </div>
                </div>
              </div>
            </div>

            <div v-if="pieType == 1">
              <div style="height: 49vh; margin-top: 20px" id="barEcharts"></div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { authDate } from "@/utils/date";
import {
  getMemberProportion,
  getMemberVisit,
  getMemberRegister,
  getMemberPieCharts,
  getMemberOverview,
} from "@/api/customer";
import { pickerOptions } from "@/views/product/options";
export default {
  data() {
    return {
      pickerOptions,
      searchTime: [],
      searchForm: {
        dateLimit: "lately30",
      },
      lineType: "0",
      lineData1: [],
      lineData2: [],
      pieType: 0,
      pieData1: [],
      pieData2: [],
      color: ["#4784C2", "#3AA4DD", "#AFCBF3", "#88ADE0", "#94D1F3"],
      cardObj: {},
      loginTypeList: [],

      beginTime: '',
      endTime: ''

    };
  },
  mounted() {
    // this.initLineCharts();
  },
  async created() {
    this.loginTypeList = await this.$getDictData("login_type");
    this.getInfo();
    this.getList();
  },
  methods: {
    nameFun(name) {
      return this.loginTypeList.find((item) => item.value == name).label;
    },
    getInfo() {
      getMemberOverview().then((res) => {
        this.cardObj = res.data;
        console.log("res", res);
      });
    },
    pieTypeChange(e) {
      if (e == 0) {
        this.initPieCharts(this.pieData1);
      } else {
        this.initBarCharts(this.pieData2);
      }
    },
    lineTypeChange(e) {
      e == "0"
        ? this.initLineCharts(this.lineData1)
        : this.initLineCharts(this.lineData2);
    },
    TimeChange(e) {
      if (e) {
       this.beginTime = ''
       this.endTime = ''
      }
    },
    changeTime(val) {
      if (val) {
        this.searchForm.dateLimit = "";
      } else {
        this.searchForm.dateLimit = "today";
      }
    },
    onSearch() {
      authDate(this.beginTime, this.endTime, v => {
        if (!v.type) {
          return this.$message.warning(v.msg);
        } else {
          // console.log(this.searchForm);
          // this.getList();
        }
      });


      let params = {
        // dateLimit: 
        //   this.searchTime.length > 0
        //     ? this.searchTime.join(",")
        //     : this.searchForm.dateLimit,
        dateLimit: this.beginTime && this.endTime ? this.beginTime + "," + this.endTime : this.searchForm.dateLimit,
      };
      this.lineType = "0";
      this.pieType = "0";
      console.log(params);
      this.getList(params);
    },
    getList(params) {
      let data = params
        ? params
        : {
          dateLimit: this.searchForm.dateLimit,
        };
      const p1 = getMemberRegister(data); // 会员注册图
      const p2 = getMemberVisit(data); // 会员访问图
      const p3 = getMemberProportion(data); // 平台占比图
      const p4 = getMemberPieCharts(data); // 会员渠道图

      Promise.all([p1, p2, p3, p4]).then((res) => {
        this.lineData1 = res[0].data;
        this.lineData2 = res[1].data;
        this.pieData1 = res[2].data;
        this.pieData2 = res[3].data.reverse();
        this.initLineCharts(this.lineData1);
        this.initPieCharts(this.pieData1);
        this.initBarCharts(this.pieData2);
      });
    },
    onReset() {
      this.searchForm = {
        dateLimit: "lately30",
      };
      this.beginTime = "";
      this.endTime = "";
      this.lineType = "0";
      this.pieType = "0";
      this.getList();
    },
    // 饼图
    initPieCharts(data) {
      var chartDom = document.getElementById("pieEcharts");
      var myChart = echarts.init(chartDom);
      console.log("data", data);
      let total = 0;
      let Sdata = data.map((item) => {
        return {
          value: item.num,
          name: this.nameFun(item.text),
        };
      });
      console.log("Sdata", Sdata);
      data.forEach((item) => {
        total += item.num;
      });

      let option = {
        title: {
          text: total, //主标题文本
          subtext: "用户数", //副标题文本
          left: "center",
          top: "43%",
          textStyle: {
            fontSize: 26,
            color: "#000",
            align: "center",
          },
          subtextStyle: {
            fontFamily: "Arial, Verdana, sans...",
            fontSize: 10,
            fontStyle: "normal",
            fontWeight: "normal",
            color: "#999",
          },
          zlevel: 0,
          z: 6,
        },
        color: this.color,
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "用户数",
            type: "pie",
            // scale: 1.2,  // 设置放大比例
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            padAngle: 15,
            itemStyle: {
              borderRadius: 10,
              borderWidth: 15,
              borderColor: "#fff",
            },
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              show: false,
            },
            data: Sdata,
            // data: [
            //   { value: 1048, name: "Search Engine" },
            //   { value: 735, name: "Direct" },
            //   { value: 580, name: "Email" },
            //   { value: 484, name: "Union Ads" },
            //   { value: 300, name: "Video Ads" },
            // ],
          },
        ],
      };

      myChart.setOption(option);
    },
    // 折线图
    initLineCharts(data) {
      var chartDom = document.getElementById("lineEcharts");
      var myChart = echarts.init(chartDom);
      let XData = Object.keys(data);
      let YData = Object.values(data);
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: false,
        color: this.lineType == 0 ? ["#6CD9B8"] : ["#5E83D5"],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {},
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: XData,
        },
        yAxis: {
          type: "value",
          minInterval: 1,
          min: 0,
        },
        series: [
          {
            name: this.lineType == 0 ? "注册人数" : "访问数",
            data: YData,
            type: "line",
            stack: "Total",

            // smooth: true,
            lineStyle: {
              width: 2,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              // 绿色渐变：#DEF5F2-  #F2F9F7 (透明60)

              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.6, [
                {
                  offset: 0,
                  color:
                    this.lineType == 0
                      ? "RGBA(157, 228, 209,1)"
                      : "RGBA(226, 222, 245, 1)",
                },
                {
                  offset: 0.5,
                  color:
                    this.lineType == 0
                      ? "RGBA(236, 249, 247,1)"
                      : "RGBA(238, 237, 249, 1)",
                },
                {
                  offset: 1,
                  color:
                    this.lineType == 0
                      ? "RGBA(246, 251, 249,1)"
                      : "RGBA(246, 247, 251,1)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
          },
        ],
      };
      setTimeout(() => {
        option && myChart.setOption(option);
      }, 100);
    },
    // 柱状图
    initBarCharts(data) {
      console.log("data", data);
      var chartDom = document.getElementById("barEcharts");
      var myChart = echarts.init(chartDom);

      let XData = data.map((item) => item.text);

      let YData = data.map((v, index) => {
        return {
          value: v.num,
          itemStyle: {
            color: this.color[index % this.color.length],
          },
        };
      });

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value", // 将x轴改为value类型
        },
        yAxis: {
          type: "category", // 将y轴改为category类型
          data: XData, // XData 作为y轴的分类数据
        },
        series: [
          {
            data: YData,
            type: "bar", // 横向条形图
            barWidth: "30%", // 设置柱子的宽度为30%
            // 或者使用 barMaxWidth 来限制最大宽度
            barMaxWidth: 50, // 设置柱子的最大宽度为50px
            label: {
              show: true, // 显示标签
              position: "right", // 标签位置：上方
              color: "#000", // 标签颜色
              fontSize: 14, // 标签字体大小
            },
          },
        ],
      };

      option && myChart.setOption(option);
      // 响应式
      // window.onresize = function () {
      //   myChart.resize();
      // };
    },
  },
};
</script>

<style lang="scss" scoped>
.top-box {
  display: flex;
  justify-content: space-between;

  .el-card {
    width: 24%;
  }

  .container-box {
    display: flex;
    align-items: center;
    height: 100px;

    // background-color: skyblue;
    .left-icon {
      width: 60px;
      height: 60px;

      >img {
        width: 100%;
        height: 100%;
      }
    }

    .right-text {
      margin-left: 20px;

      >div {
        &:nth-child(1) {
          font-weight: 400;
          font-size: 18px;
          color: #777777;
        }

        &:nth-child(2) {
          color: #333;
          font-weight: 600;
          font-size: 40px;
        }
      }
    }
  }

  .container-box-footer {
    text-align: right;
    font-weight: 400;
    font-size: 14px;
    color: #777777;
  }
}

.des {
  min-width: 200px;
  border-radius: 3px;
  padding: 20px 10px;
  // background-color: rgba(61, 155, 248, 0.1);
  align-items: center;

  .desItem {
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    &:last-child {
      margin-bottom: 0px;
    }
  }

  .label {
    display: inline-block;
    width: 24px;
    height: 13px;
    border-radius: 2px;
    margin-right: 10px;
    background-color: #9d6bed;
  }

  .value {
    display: flex;
    font-size: 14px;
    flex: 1;

    justify-content: space-between;

    .num {
      color: #999;
      font-size: 12px;
      padding-left: 5px;
      border-left: 1px solid #ccc;
      margin-left: 10px;
    }
  }
}
</style>
